<template>
	<view>
		<view class="boxinfo">
			<view class="btnlist">
				<button class="btn1" @click="boot" :disabled="!disable">启动</button>
				<button class="btn2" @click="boot" :disabled="disable">停止</button>
				<button class="btn2" :disabled="disable">复位</button>
			</view>
		</view>
		<view class="data">
			<view class="mid-data">
				<view class="mid-data-l">
					<CustomProgress :chongci="chongci">
					</CustomProgress>
				</view>
			</view>
			<view class="foot-data">
				<view class="footbox1">
					<li>上冲程最大电流:<span>{{upstrokecurrentmax}}</span></li>
					<li style="border-top:1rpx solid #ebebeb ;">下冲程最大电流:<span>{{downstrokecurrentmax}}</span></li>
				</view>
				<view class="footbox">
					<li>电流平衡率:<span>{{elecbalancerate}}</span></li>
				</view>
				<view class="footbox">
					<li>上冲程平均功率:<span>{{upaveragepower}}</span></li>
					<li style="border-top:1rpx solid #ebebeb ;">下冲程平均功率:<span>{{downstrokecurrentmax}}</span></li>
				</view>
				<view class="footbox">
					<li>功率平衡率:<span>{{powerbalancerate}}</span></li>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import CustomProgress from '@/components/CustomProgress.vue'
	export default {
		components: {
			CustomProgress
		},
		data() {
			return {
				chongci: 50, //type是数字，字符串会有警告但是不影响使用效果
				upaveragepower: '', //上冲程平均功率
				downaveragepower: '', //下冲程平均功率
				upstrokecurrentmax: '', //上冲程最大电流
				downstrokecurrentmax: '', //下冲程最大电流
				elecbalancerate: '', //电流平衡率
				powerbalancerate: '', //功率平衡率
				disable: true //按钮显示状态
			}
		},
		onload() {

		},
		created() {
			uni.request({
				url: 'http://192.168.100.75:9090/thing-model/query/testdevice2',
				method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					'Access-Control-Allow-Origin': '*' //允许所有域访问
				},
				success: (res) => {
					console.log(res.data)
					this.chongci = res.data.data[0].running_stroke
					this.upaveragepower = res.data.data[0].average_up_stroke_power
					this.downaveragepower = res.data.data[0].average_down_stroke_power
					this.upstrokecurrentmax = res.data.data[0].up_stroke_maximum_current
					this.downstrokecurrentmax = res.data.data[0].down_stroke_maximum_current
					this.elecbalancerate = res.data.data[0].current_balance_rate
					this.powerbalancerate = res.data.data[0].power_balance_rate

					//根据返回的设备状态，设置按钮可否操作
					if (res.data.data[0].operating_status == 0) {
						this.disable = true
					} else {
						this.disable = false;
					}
				}
			})
		},
		methods: {
			boot() {
				this.disable = !this.disable;
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	li {
		padding: 20rpx;
	}

	.boxinfo {
		margin-top: 5%;
		width: 100%;
		display: flex;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0rpx -5rpx 5rpx #eeeeee;
	}

	.btnlist {
		width: 100%;
		display: flex;
		display: initial;
		margin-bottom: 5%;
	}

	.btn1 {
		width: 24%;
		height: 80rpx;
		float: left;
		margin-left: 7%;
		margin-top: 7%;
		border: 1rpx solid;
		border-radius: 30rpx;
		font-size: 32rpx;
		background-color: #00bbff;
	}

	.btn2 {
		width: 24%;
		height: 80rpx;
		float: left;
		margin-left: 7%;
		margin-top: 7%;
		border: 1rpx solid;
		border-radius: 30rpx;
		font-size: 32rpx;
		background-color: #00bbff;
	}

	.data {
		display: flex;
		display: block;
		width: 100%;
		background-color: white;
	}

	.mid-data {
		width: 100%;
		height: 340rpx;
	}

	.foot-data {
		width: 100%;
		display: flex;
		display: inline-block;
		background-color: #efefef;
		border-radius: 20rpx 20rpx 0 0;
	}

	.footbox1 {
		margin: 0 auto;
		width: 80%;
		background-color: #fff;
		margin-top: 10%;
		margin-bottom: 5%;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	.footbox {
		margin: 0 auto;
		width: 80%;
		background-color: #fff;
		margin-bottom: 5%;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
</style>